<extend name="Base/common"/>

<block name="side">

</block>

<block name="body">
    <php>
        query_user(array('avatar128','username','uid'));
    </php>
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-9 weibo_main">
                <div class="row">
                    <div class="col-md-12">
                        <br/>

                        <p>记录，就是一种态度！</p>
                        <script>
                            var names ={$atwhousers};

                            var names = $.map(names,function(value,i) {
                                return {'id':i,'name':value.username,'pinyin':value.pinyin};
                            });
                            var at_config = {
                                at: "@",
                                data: names,
                                tpl: "<li data-value='@${name}'>${name}</li>",
                                show_the_at: true,
                                search_key:'pinyin'
                            };
                            $(function(){
                                $inputor = $('#weibo_content').atwho(at_config);
                            })

                        </script>
                        <p><textarea class="form-control" id="weibo_content" style="height: 6em;"
                                     placeholder="写点什么吧～～"></textarea></p>

                        <p class="pull-right"><input type="submit" value="发表 Ctrl+Enter" id="send_weibo_button"
                                                     class="btn btn-primary" data-url="{:U('doSend')}"/></p>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <p>
                            <img src="__IMG__/ad.png" style="width: 100%;"/>
                        </p>
                    </div>
                </div>


                <div class="row" style="padding-top: 10px">
                    <div class="col-md-12">

                        <ul class="nav nav-pills ucenter-tab">
                            <li
                            <eq name="tab" value="fans"> class="active"</eq>
                            ><a href="{:U('Weibo/Index/index')}">全站动态</a></li>
                            <li
                            <eq name="tab" value="following"> class="active"</eq>
                            ><a style="background-color: #7080a4;color: white" href="{:U('Weibo/Index/myconcerned')}">我关注的</a></li>

                        </ul>

                    </div>
                </div>
                <hr>

                <div id="weibo_list">
                    <include file="concernedWeibo"/>
                </div>



                <div id="load_more" class="text-center text-muted">
                    <p id="load_more_text">载入更多</p>
                </div>
            </div>
            <div class="col-md-3">
                <if condition="is_login()">
                    <div class="hot_post" style="margin-top: 0;padding-bottom: 10px">
                        <div class="row">
                            <div class="col-md-5">
                                <a href="{:U('UserCenter/Index/changeavatar')}" ><img src="{$self.avatar128}"
                                                                                      class="avatar-img"/></a>
                            </div>
                            <div class="col-md-7">
                                <a style="font-size: 1.2em;width: 100%" title="{$self.username}" class="text-more" href="{$self.space_url}">{$self.username}</a>&nbsp;{$self.icons_html}
                                <br/>积分：{$self.score}
                                <br/>头衔：{$self.title}
                            </div>
                        </div>

                        <div class="row" style="margin: 10px;text-align: center">
                            <div class="col-md-4">
                                微博<br/>{$self.weibocount}
                            </div>
                            <div class="col-md-4">
                                粉丝<br/><a href="{:U('Usercenter/Index/fans')}">{$self.fans}</a>
                            </div>
                            <div class="col-md-4">
                                关注<br/><a href="{:U('Usercenter/Index/following')}">{$self.following}</a>
                            </div>
                        </div>
                    </div>
                </if>
                <div>
                    {:hook('checkin')}

                    {:hook('Rank')}

                    {:W('UserList/lists',array('forum_id'=>$forum_id))}
                </div>
            </div>

        </div>
    </div>
</block>

<block name="script">
    <script type="text/javascript" src="__STATIC__/oneplus/js/ext/atwho/atwho.js"></script>
    <link type="text/css" rel="stylesheet" href="__STATIC__/oneplus/js/ext/atwho//atwho.css"/>
    <script src="__JS__/weibo.js"></script>
    <script>
        $(function () {
            var noMoreNextPage = false;
            var isLoadingWeibo = false;
            var currentPage = 1;

            $('#weibo_content').keypress(function (e) {
                if (e.ctrlKey && e.which == 13 || e.which == 10) {
                    $("#send_weibo_button").click();
                }
            });


            //点击发表微博按钮之后
            $('#send_weibo_button').click(function () {
                //获取参数
                var url = $(this).attr('data-url');
                var content = $('#weibo_content').val();
                var button = $(this);

                //发送到服务器
                $.post(url, {content: content}, function (a) {
                    if (a.status) {
                        button.attr('class', 'btn btn-primary');
                        button.val('发表');
                        reloadWeiboList();
                        clearWeibo();
                    } else {
                        op_error(a.info, '温馨提示');
                    }
                });
            });

            //当屏幕滚动到底部时
            $(window).scroll(function () {
                if (noMoreNextPage) {
                    return;
                }
                if (isLoadingWeibo) {
                    return;
                }
                if (isLoadMoreVisible()) {
                    loadNextPage();
                }
            });
            $(window).trigger('scroll');

            //点击评论之后载入评论
            $(document).on('click', '.weibo-comment-link', function (e) {
                var weibo_id = $(this).attr('data-weibo-id');
                var weiboCommentList = $('#weibo_' + weibo_id + ' .weibo-comment-list');
                if (weiboCommentList.is(':visible')) {
                    hideWeiboCommentList(weiboCommentList);
                } else {
                    showWeiboCommentList(weiboCommentList);
                }

                //取消默认动作
                e.preventDefault();
                return false;
            });


            function isLoadMoreVisible() {
                var visibleHeight = $(window.top).height();
                var loadMoreOffset = $('#load_more').offset();
                return visibleHeight + window.scrollY > loadMoreOffset.top;
            }

            function loadNextPage() {
                currentPage = currentPage + 1;
                loadWeiboList(currentPage);
            }

            function reloadWeiboList() {
                loadWeiboList(1, function () {
                    clearWeiboList();
                    currentPage = 1;
                });
            }

            function clearWeibo() {
                $('#weibo_content').val('');
            }

            function loadWeiboList(page, onBeforePrepend) {
                //默认载入第1页
                if (page == undefined) {
                    page = 1;
                }

                //通过服务器载入微博列表
                var url = "{:U('concernedWeibo')}";
                isLoadingWeibo = true;
                $('#load_more_text').text('正在载入...');
                $.post(url, {page: page}, function (a) {
                    if (a.status == 0) {
                        noMoreNextPage = true;
                        $('#load_more_text').text('没有了');
                    }
                    if (onBeforePrepend != undefined) {
                        onBeforePrepend();
                    }
                    $('#weibo_list').append(a);
                    isLoadingWeibo = false;
                });
            }

            function clearWeiboList() {
                currentPage = 0;
                $('#weibo_list').html('');
            }

            function showWeiboCommentList(weiboCommentList) {
                //判断是否已经载入
                var weiboContainer = $('.weibo-comment-container', weiboCommentList);
                var loaded = weiboCommentList.attr('data-weibo-comment-loaded');

                //如果已经载入，只要显示即可
                if (loaded) {
                    weiboCommentList.show();
                    return;
                }

                //显示“正在加载评论”
                weiboContainer.html('<span class="text-muted">正在加载...</span>');
                weiboCommentList.show();

                //通过服务器载入评论列表
                reloadWeiboCommentList(weiboCommentList);
            }

            function hideWeiboCommentList(weiboCommentList) {
                weiboCommentList.hide();
            }


        })
    </script>
</block>
